<template>
  <el-dialog
    title="详情"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center"
    lock-scroll
    width="1000px"
  >
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="dataForm"
        size="small"
        label-width="100px"
        label-position="right"
      >
        <template v-if="!loading">
          <!-- <el-col :span="12">
            <el-form-item label="问卷模板代码" prop="questCode">
              <p>{{ dataForm.questCode }}</p>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="问卷模板名称" prop="questName">
              <p>{{ dataForm.questName }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属分类" prop="questionnaireTypeId">
              <p>
                {{ dataForm.questionnaireTypeId }}
              </p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="问卷模板描述" prop="description">
              <p>{{ dataForm.description }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建用户" prop="creatorUserId">
              <p>{{ dataForm.creatorUserId }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="creatorTime">
              <p>{{ dataForm.creatorTime }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="0">
              <div class="jsbos-common-title">
                <h2>模板调查项</h2>
              </div>
              <el-table :data="dataForm.oqquestionnaireitemList" size="mini">
                <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                  align="center"
                />

                <el-table-column prop="itemName" label="调查项名称">
                  <template slot-scope="scope">
                    <p>{{ scope.row.itemName }}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="itemType"
                  width="100px"
                  label="类型"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.itemType == 'radio'"> 单选 </el-tag>
                    <el-tag v-if="scope.row.itemType == 'multiSelect'"
                      >多选
                    </el-tag>
                    <el-tag v-if="scope.row.itemType == 'scoring'"
                      >打分
                    </el-tag>
                    <el-tag v-if="scope.row.itemType == 'writing'">填报</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="questionItem"
                  width="450px"
                  label="调查项内容"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.itemType == 'radio'">
                      <el-radio-group v-model="scope.row.itemResult">
                        <el-radio-button
                          :label="item"
                          :key="item"
                          v-for="item in scope.row.questionItem"
                          disabled
                          >{{ item }}</el-radio-button
                        >
                      </el-radio-group>
                    </div>
                    <div v-if="scope.row.itemType == 'multiSelect'">
                      <el-checkbox-group v-model="scope.row.itemResult">
                        <el-checkbox-button
                          :label="item"
                          :key="item"
                          v-for="item in scope.row.questionItem"
                          disabled
                          >{{ item }}</el-checkbox-button
                        >
                      </el-checkbox-group>
                    </div>
                    <div v-if="scope.row.itemType == 'writing'">
                      <el-input
                        type="textarea"
                        :rows="1"
                        placeholder="请输入内容"
                        v-model="scope.row.itemResult"
                        disabled
                      >
                      </el-input>
                    </div>
                    <div v-if="scope.row.itemType == 'scoring'" disabled="true">
                      <el-rate v-model="scope.row.itemResult" show-text>
                      </el-rate>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import jsbos from "@/utils/jsbos";
export default {
  components: {},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: "",
      dataForm: {
        id: "",
        questCode: "",
        questName: "",
        questionnaireTypeId: "",
        description: "",
        creatorUserId: "",
        creatorTime: "",
        oqquestionnaireitemList: [],
      },
      questionnaireTypeIdOptions: [],
      questionnaireTypeIdProps: {
        children: "children",
        label: "fullName",
        value: "id",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      for (let i = 0; i < _dataAll.oqquestionnaireitemList.length; i++) {
        var _list = _dataAll.oqquestionnaireitemList[i];
      }
      this.dataForm = _dataAll;
    },

    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url:
              "/api/questionnaire/OqQuestionnaire/detail/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        }
      });
    },
  },
};
</script>
